<template class="">
  <div>
    <!-- <el-popover
      placement="bottom"
      :width="300"
      trigger="hover"
      :popper-style="{ padding: 0 }"
    >
      <template #reference>
        <el-button text style="width: 40px; height: 40px">
          <el-icon style="transform: scale(1.5)"><MoreFilled /></el-icon>
        </el-button>
      </template>
      <el-scrollbar max-height="calc(100vh - 120px)">
        <div style="padding: 18px 6px">
          <ConfigButtons />
          <el-divider />
          <NavMenu direction="vertical" />
        </div>
      </el-scrollbar>
    </el-popover> -->
    <el-button
      text
      style="width: 40px; height: 40px"
      @click="showDrawer = !showDrawer"
    >
      <el-icon style="transform: scale(1.5)"><MoreFilled /></el-icon>
    </el-button>
    <el-drawer v-model="showDrawer" direction="rtl" :with-header="false" size="300">
      <el-scrollbar>
        <ConfigButtons />
        <el-divider />
        <NavMenu direction="vertical" @select="showDrawer = false" />
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from "vue";
import NavMenu from "./navMenu.vue";
import ConfigButtons from "./configButtons.vue";

const showDrawer = ref(false);
</script>
